import 'package:flutter/material.dart';
import 'package:flutter_app/components/layout.dart';
import 'package:flutter_app/utils/AppUtil.dart';

class ZeroInterestDetail extends StatefulWidget {
  @override
  _ZeroInterestDetailState createState() => _ZeroInterestDetailState();
}

Widget GreyText(String text) {
  return Text(
    text,
    style: TextStyle(color: Colors.grey, fontSize: 12),
  );
}

Widget processItem({String date, String desc, bool leftBorder = true}) {
  return Stack(
    children: [
      Container(
        margin: EdgeInsets.only(left: 9),
        padding: EdgeInsets.only(bottom: 25.0, left: 35.0),
        decoration: BoxDecoration(
            border: Border(
                left: leftBorder
                    ? BorderSide(color: Colors.grey,width: 1.2)
                    : BorderSide.none)),
        child: ColumnStart(
          children: [
            Text(
              date,
              style: TextStyle(fontSize: 16, color: Colors.black54),
            ),
            SizedBox(
              height: 10.0,
            ),
            Text(
              desc,
              style: TextStyle(fontWeight: FontWeight.w500),
            ),
          ],
        ),
      ),
      Positioned(
        child: Container(
          width: 18,
          height: 18,
          decoration: BoxDecoration(
            color: Colors.white,
              border: Border.all(color: Colors.blueAccent, width: 1.5),
              shape: BoxShape.circle),
          child: Icon(Icons.circle,
              size: 10, color: Colors.blueAccent),
        ),
      )
    ],
  );
}
Widget processRemarkTitle(String text){
  return Text(text,style: TextStyle(fontSize: 13,fontWeight: FontWeight.w600,color: Colors.black,fontFamily: 'dinpro'),);
}
Widget processRemarkSubTitle(String text){
  return Text(text,style: TextStyle(fontSize: 13,fontWeight: FontWeight.w500,color: Colors.black54),);
}
class _ZeroInterestDetailState extends State<ZeroInterestDetail> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: DarkHeadBar('零息借贷'),
      body: Column(
        children: [
          Expanded(
            child: SingleChildScrollView(
              child: Column(
                children: [
                  Container(
                      color: Colors.blue.withOpacity(0.03),
                      width: MediaQuery.of(context).size.width,
                      padding: EdgeInsets.symmetric(
                          horizontal: 15.0, vertical: 20.0),
                      child: Column(
                        children: [
                          RowBetween(
                            children: [
                              Text(
                                '2021-03-26 到期',
                                style: TextStyle(fontWeight: FontWeight.w500),
                              ),
                              Text(
                                '10天',
                                style: TextStyle(fontWeight: FontWeight.w500),
                              ),
                            ],
                          ),
                          SizedBox(
                            height: 10,
                          ),
                          RowBetween(
                              crossAxisAlignment: CrossAxisAlignment.end,
                              children: [
                                ColumnStart(
                                  children: [
                                    Text(
                                      '\$' + AppUtil.formatNum(64000),
                                      style: TextStyle(
                                          fontSize: 22,
                                          color: Colors.blueAccent,
                                          fontFamily: 'dinpro'),
                                    ),
                                    GreyText('止盈价'),
                                  ],
                                ),
                                Column(
                                  children: [
                                    Text(
                                      '55%',
                                      style: TextStyle(
                                          fontWeight: FontWeight.w500,
                                          color: Colors.black,
                                          fontFamily: 'dinpro',
                                          fontSize: 16),
                                    ),
                                    GreyText('质押率'),
                                  ],
                                ),
                                Column(
                                  children: [
                                    Text(
                                      '0.00%',
                                      style: TextStyle(
                                          fontWeight: FontWeight.w500,
                                          color: Colors.black,
                                          fontFamily: 'dinpro',
                                          fontSize: 16),
                                    ),
                                    GreyText('服务费率'),
                                  ],
                                ),
                              ])
                        ],
                      )),
                  Container(
                    padding:
                        EdgeInsets.symmetric(vertical: 10.0, horizontal: 15.0),
                    child: Column(
                      children: [
                        RowBetween(children: [
                          Text(
                            '质押金额',
                            style: TextStyle(
                                fontSize: 16, fontWeight: FontWeight.w500),
                          ),
                          Row(
                            children: [
                              Text(
                                '可用余额：0.00BTC ',
                                style:
                                    TextStyle(color: Colors.grey, fontSize: 13),
                              ),
                              Text(
                                '充值',
                                style: TextStyle(
                                    color: Colors.blueAccent,
                                    fontSize: 13,
                                    fontWeight: FontWeight.w500),
                              )
                            ],
                          )
                        ]),
                        TextField(
                            decoration: InputDecoration(
                                hintText: '请输入质押金额1-50',
                                enabledBorder: UnderlineInputBorder(
                                    borderSide: BorderSide(
                                        color: Colors.grey.withOpacity(0.4),
                                        width: 0.5)),
                                hintStyle: TextStyle(
                                    color: Colors.grey.withOpacity(0.5),
                                    height: 3,
                                    fontSize: 15),
                                contentPadding:
                                    const EdgeInsets.symmetric(vertical: 0.0),
                                suffixIcon: Container(
                                  width: 10,
                                  alignment: Alignment.topRight,
                                  child: Text(
                                    'BTC',
                                    style: TextStyle(
                                        fontSize: 15,
                                        height: 3,
                                        fontWeight: FontWeight.w500),
                                  ),
                                ))),
                        SizedBox(
                          height: 15,
                        ),
                        Container(
                            margin: EdgeInsets.symmetric(vertical: 15.0),
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '放款币种',
                              style: TextStyle(
                                  fontSize: 16, fontWeight: FontWeight.w500),
                            )
                        ),
                        //
                        RowBetween(children: [
                          Container(
                            padding: EdgeInsets.symmetric(vertical: 5.0,horizontal: 15.0),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(6.0),
                              border:Border.all(color: Colors.grey.withOpacity(0.3))
                            ),
                            child: ColumnStart(
                              children: [
                                Text('USDC',style: TextStyle(color: Colors.black,fontWeight: FontWeight.w500,fontSize: 18),),
                                Text('1USD=1 USDC',style: TextStyle(color: Colors.black45,fontWeight: FontWeight.w500),),
                              ],
                            ),
                          )
                        ]),
                        SizedBox(
                          height: 15,
                        ),
                        Container(
                            margin: EdgeInsets.symmetric(vertical: 20.0),
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '借款流程',
                              style: TextStyle(
                                  fontSize: 16, fontWeight: FontWeight.w500),
                            )),
                        Container(
                          width: double.infinity,
                          child: ColumnStart(
                            children: [
                              processItem(date: '2021-03-18', desc: '预约借款'),
                              processItem(
                                  date: '2021-03-19', desc: '24小时内确认交易'),
                              processItem(
                                  date: '2021-03-26',
                                  desc: '到期结束',
                                  leftBorder: false)
                            ],
                          ),
                        ),
                        Container(
                          padding: EdgeInsets.only(left: 50),
                          child: Wrap(
                            runSpacing: 15.0,
                            children: [
                              ColumnStart(
                                children: [
                                  processRemarkTitle('BTC/USD ＞=88000'),
                                  processRemarkSubTitle('质押物以USDC结算，结算金额=质押金额*88,000'),
                                ],
                              ),
                              ColumnStart(
                                children: [
                                  processRemarkTitle('32,314.89 ＜ BTC/USD ＜88,000'),
                                  processRemarkSubTitle('借款结清后返还质押的BTC'),
                                ],
                              ),
                              ColumnStart(
                                children: [
                                  processRemarkTitle('BTC/USD ＜=32，314.89'),
                                  processRemarkSubTitle('借款结清，无需归还身剩余欠款'),
                                ],
                              ),
                              Text('注：BTC结算价格取自头部交易所（Bittrex,Bitstamp,Gemini,Kraken,Itbit,LMAX Digital）去掉最高价和最低价之后的平均价。',style: TextStyle(color: Colors.grey),),
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
          Container(
            padding: EdgeInsets.symmetric(vertical: 15.0, horizontal: 20.0),
            child: Column(
              children: [
                Row(
                  children: [
                    Text(
                      '已阅读并同意',
                      style: TextStyle(
                          color: Colors.grey,
                          fontSize: 12,
                          fontWeight: FontWeight.w500),
                    ),
                    Text(
                      '《数字货币融通及质押协议》',
                      style: TextStyle(
                          fontSize: 12,
                          color: Colors.blueAccent,
                          fontWeight: FontWeight.w500),
                    ),
                  ],
                ),
                SizedBox(
                  height: 10.0,
                ),
                FlatButton(
                    height: 45,
                    minWidth: double.infinity,
                    color: Colors.blue,
                    textColor: Colors.white,
                    onPressed: () {},
                    child: Text('立即预约'))
              ],
            ),
          )
        ],
      ),
    );
  }
}
